import React, { Component } from 'react'
import BScroll from 'better-scroll'
import HomeCxbCss from './HomeCxb.module.css'
import { StickyContainer} from 'react-sticky';
import {withRouter} from "react-router-dom"
import axios from 'axios'
class HomeCxb extends Component {
    constructor() {
        super()
        this.state = {
            cxbList: [],
            cxbphotosList: []
        }
    }
    toDetail(pid) {
        this.props.history.push('/detail', { pid })
    }
    componentDidMount() {
        const wrapper = document.querySelector('#cxb')
        //选中DOM中定义的 .wrapper 进行初始化
        const scroll = new BScroll(wrapper, {
            scrollX: true,  //开启横向滚动
            click: true,  // better-scroll 默认会阻止浏览器的原生 click 事件
            scrollY: false, //关闭竖向滚动
        })
        axios.get('http://lmx.free.idcfengye.com/product/nice/product/selectbyorders').then(res => {
            this.setState({
                cxbList: res.data,
                cxbphotosList: res.data.photos
            })
        })
    }
    render() {
        return (
            <StickyContainer>
                <div id='cxb' className={HomeCxbCss.cxb}>
                    <ul className={HomeCxbCss.ul}>
                        {
                            this.state.cxbList.map(el =>
                                <li onClick={() => this.toDetail(el.pid)} className={HomeCxbCss.li}>
                                    <div className={HomeCxbCss.box}>
                                        <div className={HomeCxbCss.photo}>
                                            <img className={HomeCxbCss.img} src={el.photos[0].path} alt='' />
                                        </div>
                                        <dl className={HomeCxbCss.dl}>
                                            <dt className={HomeCxbCss.dt}>{el.pname}</dt>
                                            <dd className={HomeCxbCss.dd}>￥{el.price}<span className={HomeCxbCss.span}>今日成交{el.count}</span></dd>
                                        </dl>
                                    </div>
                                </li>)
                        }

                    </ul>
                </div>
            </StickyContainer>
        )
    }
}
export default withRouter(HomeCxb)
